<template>
<!--我的订单-->
  <div class="orders">
      <Tabs :animated="false" v-model="tab" @on-click="tabChange">
        <TabPane label="全部订单">
          <span v-if="orders.length > 0">
            <ul class="orderOut" v-for="order in orders">
              <li v-if="order.orderStatus === 'OS_UNPAID'">
                <router-link :to="{name:'orderdetail',query:{orderId:order.orderId}}">
                  <p class="orderTitle font14">
                    <span class="orderTimer">{{order.createTime}}</span>
                    <span class="orderNum">订单号：{{order.orderId}}</span>
                    <span class="orderState">待付款</span>
                  </p>
                </router-link>
                  <div class="orderInfo" @click.stop.prevent="targetDetail(order.orderId,order.targetId,order.orderEntity)">
                    <img class="orderImg" src="../../assets/continue.png" v-if="order.orderEntity == 'OT_STUDY'"/>
                    <img class="orderImg" src="../../assets/examination.png" v-else-if="order.orderEntity == 'OT-EXAM'"/>
                    <img class="orderImg" :src="order.courseImage" v-else/>
                    <span class="orderName font14">{{order.courseTitle}}</span>
                    <p class="orderType">     </p>
                    <div class="clearfix orderbot">
                      <p class="priceNum">¥{{order.orderAmount}}</p>
                      <span class="orderConcal" @click.stop="delOrderAll(order.orderId)">删除订单</span>
                      <span class="orderConcal" @click.stop="cancelAll(order.orderId)">取消订单</span>
                      <a href="javascript;:" @click.stop.prevent="orderPrePay(order.orderId)" class="orderPay">立即支付</a>
                    </div>
                  </div>
              </li>
              <li v-else-if="order.orderStatus === 'OS_FINISH'">
                <router-link :to="{name:'orderdetail',query:{orderId:order.orderId}}">
                <p class="orderTitle font14">
                  <span class="orderTimer">{{order.createTime}}</span>
                  <span class="orderNum">订单号：{{order.orderId}}</span>
                  <span class="orderState">已完成</span>
                </p>
                </router-link>
                <div class="orderInfo" @click.stop.prevent="targetDetail(order.orderId,order.targetId,order.orderEntity)">
                  <img class="orderImg" src="../../assets/continue.png" v-if="order.orderEntity == 'OT_STUDY'"/>
                  <img class="orderImg" src="../../assets/examination.png" v-else-if="order.orderEntity == 'OT-EXAM'"/>
                  <img class="orderImg" :src="order.courseImage" v-else/>
                  <span class="orderName font14">{{order.courseTitle}}</span>
                  <div class="clearfix orderbot">
                    <p class="priceNum">¥{{order.orderAmount}}</p>
                    <span class="orderConcal" @click.stop="delOrderAll(order.orderId)">删除订单</span>
                    <span @click.stop="apply(order.orderId,order.courseTitle,order.orderAmount)" class="orderPay" v-if="order.isInvoice === 2">申请发票</span>
                  </div>
                </div>
              </li>
              <li v-else>
                <router-link :to="{name:'orderdetail',query:{orderId:order.orderId}}">
                <p class="orderTitle font14">
                  <span class="orderTimer">{{order.createTime}}</span>
                  <span class="orderNum">订单号：{{order.orderId}}</span>
                  <span class="orderState">已关闭</span>
                </p>
                </router-link>
                <div class="orderInfo" @click.stop.prevent="targetDetail(order.orderId,order.targetId,order.orderEntity)">
                  <img class="orderImg" src="../../assets/continue.png" v-if="order.orderEntity == 'OT_STUDY'"/>
                  <img class="orderImg" src="../../assets/examination.png" v-else-if="order.orderEntity == 'OT-EXAM'"/>
                  <img class="orderImg" :src="order.courseImage" v-else/>
                  <span class="orderName font14">{{order.courseTitle}}</span>
                  <div class="clearfix orderbot">
                    <p class="priceNum">¥{{order.orderAmount}}</p>
                    <span class="orderConcal"  @click.stop="delOrderAll(order.orderId)">删除订单</span>
                  </div>
                </div>
              </li>
            </ul>
            <div class="pageout"><Page :total="allTotal" :current="allPage" :pageSize="size" @on-change="changePage" /></div>
          </span>
          <span v-else>
            <nodata tip="暂时还没有订单记录哦~"></nodata>
          </span>
        </TabPane>
        <TabPane label="待付款">
          <span v-if="orders.length > 0">
            <ul class="orderOut" v-for="order in orders">
            <li v-if="order.orderStatus === 'OS_UNPAID'">
              <router-link :to="{name:'orderdetail',query:{orderId:order.orderId}}">
                <p class="orderTitle font14">
                  <span class="orderTimer">{{order.createTime}}</span>
                  <span class="orderNum">订单号：{{order.orderId}}</span>
                  <span class="orderState">待付款</span>
                </p>
                </router-link>
                <div class="orderInfo" @click.stop.prevent="targetDetail(order.orderId,order.targetId,order.orderEntity)">
                  <img class="orderImg" src="../../assets/continue.png" v-if="order.orderEntity == 'OT_STUDY'"/>
                  <img class="orderImg" src="../../assets/examination.png" v-else-if="order.orderEntity == 'OT-EXAM'"/>
                  <img class="orderImg" :src="order.courseImage" v-else/>
                  <span class="orderName font14">{{order.courseTitle}}</span>
                  <p class="orderType font14"></p>
                  <div class="clearfix orderbot">
                    <p class="priceNum">¥{{order.orderAmount}}</p>
                    <span class="orderConcal" @click.stop="delOrderUnp(order.orderId)">删除订单</span>
                    <span class="orderConcal" @click.stop="cancelUnp(order.orderId)">取消订单</span>
                    <a href="javascript;:" @click.stop.prevent="orderPrePay(order.orderId)" class="orderPay">立即支付</a>
                  </div>
                </div>
            </li>
            </ul>
            <div class="pageout"><Page :total="payTotal" :current="payPage" :pageSize="size" @on-change="changePage" /></div>
          </span>
          <span v-else>
            <nodata tip="暂时还没有订单记录哦~"></nodata>
          </span>
        </TabPane>
        <TabPane label="已完成">
          <span v-if="orders.length > 0">
              <ul class="orderOut" v-for="order in orders">
                <li v-if="order.orderStatus === 'OS_FINISH'">
                  <router-link :to="{name:'orderdetail',query:{orderId:order.orderId}}">
                  <p class="orderTitle font14">
                    <span class="orderTimer">{{order.createTime}}</span>
                    <span class="orderNum">订单号：{{order.orderId}}</span>
                    <span class="orderState">已完成</span>
                  </p>
                  </router-link>
                  <div class="orderInfo" @click.stop.prevent="targetDetail(order.orderId,order.targetId,order.orderEntity)">
                    <img class="orderImg" src="../../assets/continue.png" v-if="order.orderEntity == 'OT_STUDY'"/>
                    <img class="orderImg" src="../../assets/examination.png" v-else-if="order.orderEntity == 'OT-EXAM'"/>
                    <img class="orderImg" :src="order.courseImage" v-else/>
                    <span class="orderName font14">{{order.courseTitle}}</span>
                    <div class="clearfix orderbot">
                      <p class="priceNum">¥{{order.orderAmount}}</p>
                      <span class="orderConcal" @click.stop="delOrderFinish(order.orderId)">删除订单</span>
                      <!--<router-link to="/applyfapiao" class="orderPay">申请发票</router-link>-->
                      <span @click.stop="apply(order.orderId,order.courseTitle,order.orderAmount)" class="orderPay" v-if="order.isInvoice === 2">申请发票</span>
                    </div>
                  </div>
                </li>
              </ul>
            <div class="pageout"><Page :total="finishTotal" :current="finishPage" :pageSize="size" @on-change="changePage"/></div>
          </span>
          <span v-else>
            <nodata tip="暂时还没有订单记录哦~"></nodata>
          </span>
        </TabPane>
        <TabPane label="已关闭">
          <span v-if="orders.length > 0">
            <ul class="orderOut" v-for="order in orders">
              <li v-if="order.orderStatus === 'OS_CLOSE'">
                <router-link :to="{name:'orderdetail',query:{orderId:order.orderId}}">
                <p class="orderTitle font14">
                  <span class="orderTimer">{{order.createTime}}</span>
                  <span class="orderNum">订单号：{{order.orderId}}</span>
                  <span class="orderState">已关闭</span>
                </p>
                </router-link>
                <div class="orderInfo" @click.stop.prevent="targetDetail(order.orderId,order.targetId,order.orderEntity)">
                  <img class="orderImg" src="../../assets/continue.png" v-if="order.orderEntity == 'OT_STUDY'"/>
                  <img class="orderImg" src="../../assets/examination.png" v-else-if="order.orderEntity == 'OT-EXAM'"/>
                  <img class="orderImg" :src="order.courseImage" v-else/>
                  <span class="orderName font14">{{order.courseTitle}}</span>
                  <div class="clearfix orderbot">
                    <p class="priceNum">¥{{order.orderAmount}}</p>
                    <span class="orderConcal"  @click.stop="delOrderClose(order.orderId)">删除订单</span>
                  </div>
                </div>
              </li>
            </ul>
            <div class="pageout"><Page :total="closeTotal" :current="closePage" :pageSize="size" @on-change="changePage"/></div>
          </span>
          <span v-else>
            <nodata tip="暂时还没有订单记录哦~"></nodata>
          </span>
        </TabPane>
      </Tabs>
      <Spin fix v-show="isSpinShow" >
        <div class="loader">
          <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
          <div class="font14">加载中...</div>
        </div>
      </Spin>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }

  .orderPay, .orderConcal {
    float: right;
    padding: 0 5px;
    min-width: 90px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
    background-color: #957960;
  }
  .orderConcal {
    color: #957960;
    border: 1px solid #957960;
    background-color: #fff;
    cursor: pointer;
    margin-left: 10px;
  }
  .orderOut li {
    padding: 24px 0;
    border-bottom: 1px solid #E1E1E1;
    .orderTitle {
      /*font-size: 16px;*/
      color: #999;
      height: 24px;
      line-height: 24px;
      span {
        height: 24px;
        line-height: 24px;
      }
      .orderTimer {
        float: left;
        span {
          margin-left: 12px;
        }
      }
      .orderNum {
        float: left;
        margin-left: 84px;
      }
      .orderState {
        float: right;
        color: #666;
      }
    }
    .orderInfo {
      padding: 15px 0 0 220px;
      position: relative;
      height: 125px;
      cursor: pointer;
      .orderImg {
        display: block;
        width: 200px;
        height: 110px;
        overflow: hidden;
        position: absolute;
        left: 0px;
        top: 15px;
        object-fit: cover;
      }
      .orderName, .orderType {
        /*font-size: 16px;*/
        color: #333;
        line-height: 24px;
        display: block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        word-break: break-all;
        word-wrap: break-word;
      }
      .orderName {
        margin-top: 2px;
        display: inline-block !important;
        max-width: 100%;
      }
      .orderName:hover {
        color: #957960;
      }
      .orderType {
        margin-top: 8px;
      }
      .orderbot {
        margin-top: 5px;
        .priceNum {
          float: left;
          font-size: 18px;
          font-weight: 600;
          height: 34px;
          line-height: 34px;
          color: #FF3300;
        }
        .orderPay {
          float: right;
          padding: 0 5px;
          min-width: 90px;
          height: 34px;
          line-height: 34px;
          text-align: center;
          color: #fff;
          font-size: 12px;
          border-radius: 4px;
          background-color: #957960;
          cursor: pointer;
        }
        .orderConcal {
          float: right;
          padding: 0 15px;
          min-width: 80px;
          font-size: 12px;
          height: 34px;
          line-height: 34px;
          text-align: center;
          color: #957960;
          border: 1px solid #957960;
          border-radius: 4px;
          background-color: #fff;
          cursor: pointer;
          margin-left: 10px;
        }
      }
    }
  }
  .pageout {
    text-align: center;
    margin-top: 25px;
    height: 34px;
  }

</style>
<script type="text/ecmascript-6">
  import nodata from '../template/null'
  import {orderListWeb,cancelOrderWeb,delOrder,centreInfoWeb} from '../../http'
  import imgPathFilter from '../../myFilters'
  import {getStore} from '../../storage'
    export default {
        inject:['reload'],
        name: '',
        props: {},
        data() {
            return {
              isSpinShow:false,
              allPage:1,
              payPage:1,
              finishPage:1,
              closePage:1,
              allTotal:0,
              payTotal:0,
              finishTotal:0,
              closeTotal:0,
              size:8,
              tab:0,          //当前的Tab页
              orders:''       //订单列表
            };
        },
        methods: {
          //跳转购买商品详情
          targetDetail(orderId,targetId,orderEntity){
           if (orderEntity === 'OT_COURSE'){
              this.$router.push({
                name: 'coursedetail',
                query:{
                  courseId:targetId,
                }
              })
            }else if (orderEntity === 'OT_OFFCOURSE') {
              this.$router.push({
                name: 'offcoursedetail',
                query:{
                  courseId:targetId,
                }
              })
            }else if (orderEntity === 'OT_LIVE') {
              this.$router.push({
                name: 'zhibodetail',
                query:{
                  liveId:targetId
                }
              })
            }else {
             this.$router.push({
               name: 'orderdetail',
               query: {
                 orderId: orderId,
               }
             })
           }
          },
          //查看订单详情
          orderPrePay(orderId){
            this.$router.push({
              name:'orderdetail',
              query:{orderId:orderId}
            })
          },
          //开发票
          apply(id,title,amount){
            this.$router.push({
            name:'applyfapiao',
              query:{
                invoiceBody:title,
                invoiceAmount:amount,
                orderId:id
              }
            })
          },
          //换页
          changePage(pageNumber){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              if (this.tab === 0) {
                this.allPage = pageNumber;
                //用户是否登录
                centreInfoWeb().then(res => {
                  if (res.code === 200) {
                    //获取对应的订单列表
                    orderListWeb({pageNumber: this.allPage,pageSize:this.size, orderStatus: ''}).then(res => {
                      if(res.code === 200) {
                        this.isSpinShow = false;
                        this.orders = res.data.list.rows;
                        this.allTotal = res.data.list.total;
                      }else {
                        this.isSpinShow = false;
                        this.$Notice.warning({
                          title: "个人中心提醒",
                          desc: res.info,
                          duration: 3,
                        });
                      }
                    }).catch()
                  } else {
                    this.isSpinShow = false;
                    this.$parent.$refs.loginInput.showModal()
                  }
                }).catch()
              } else if (this.tab === 1) {
                this.payPage = pageNumber;
                //用户是否登录
                centreInfoWeb().then(res => {
                  if (res.code === 200) {
                    //获取对应的订单列表
                    orderListWeb({pageNumber: this.payPage,pageSize:this.size, orderStatus: 'OS_UNPAID'}).then(res => {
                      if(res.code === 200) {
                        this.isSpinShow = false;
                        this.orders = res.data.list.rows;
                        this.payTotal = res.data.list.total;
                      }else {
                        this.isSpinShow = false;
                        this.$Notice.warning({
                          title: "个人中心提醒",
                          desc: res.info,
                          duration: 3,
                        });
                      }
                    }).catch()
                  } else {
                    this.isSpinShow = false;
                    this.$parent.$refs.loginInput.showModal()
                  }
                }).catch()
              } else if (this.tab === 2) {
                this.finishPage = pageNumber;
                //用户是否登录
                centreInfoWeb().then(res => {
                  if (res.code === 200) {
                    //获取对应的订单列表
                    orderListWeb({pageNumber: this.finishPage,pageSize:this.size, orderStatus: 'OS_FINISH'}).then(res => {
                      if(res.code === 200) {
                        this.isSpinShow = false;
                        this.orders = res.data.list.rows;
                        this.finishTotal = res.data.list.total;
                      }else {
                        this.isSpinShow = false;
                        this.$Notice.warning({
                          title: "个人中心提醒",
                          desc: res.info,
                          duration: 3,
                        });
                      }
                    }).catch()
                  } else {
                    this.isSpinShow = false;
                    this.$parent.$refs.loginInput.showModal()
                  }
                }).catch()
              } else {
                this.closePage = pageNumber;
                //用户是否登录
                centreInfoWeb().then(res => {
                  if (res.code === 200) {
                    //获取对应的订单列表
                    orderListWeb({pageNumber: this.closePage,pageSize:this.size, orderStatus: 'OS_CLOSE'}).then(res => {
                      if(res.code === 200) {
                        this.isSpinShow = false;
                        this.orders = res.data.list.rows;
                        this.closeTotal = res.data.list.total;
                      }else {
                        this.isSpinShow = false;
                        this.$Notice.warning({
                          title: "个人中心提醒",
                          desc: res.info,
                          duration: 3,
                        });
                      }
                    }).catch()
                  } else {
                    this.isSpinShow = false;
                    this.$parent.$refs.loginInput.showModal()
                  }
                }).catch()
              }
            }
          },
          //切换标签
          tabChange(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              if (this.tab === 0) {
                //用户是否登录
                centreInfoWeb().then(res => {
                  if (res.code === 200) {
                    //获取对应的订单列表
                    orderListWeb({pageNumber: this.allPage,pageSize:this.size, orderStatus: ''}).then(res => {
        /*              if(res.code === 200) {
                        this.isSpinShow = false;
                        this.orders = res.data.list.rows;
                        this.allTotal = res.data.list.total;
                      }else {
                        this.isSpinShow = false;
                        this.$Notice.warning({
                          title: "个人中心提醒",
                          desc: res.info,
                          duration: 3,
                        });
                      }*/
                      //当页数据被全部删除，判断是否还有前页，有则请求前一页数据
                      if (res.data.list.rows.length <= 0 && res.data.list.page > 1) {
                        this.allPage--;
                        orderListWeb({pageNumber: this.allPage,pageSize:this.size, orderStatus: ''}).then(res => {
                          if(res.code === 200) {
                            this.isSpinShow = false;
                            this.orders = res.data.list.rows;
                            this.allTotal = res.data.list.total;
                          }else {
                            this.isSpinShow = false;
                            this.$Notice.warning({
                              title: "个人中心提醒",
                              desc: res.info,
                              duration: 3,
                            });
                          }
                        }).catch()
                      } else {
                        this.isSpinShow = false;
                        this.orders = res.data.list.rows;
                        this.allTotal = res.data.list.total;
                      }
                    }).catch()
                  } else {
                    this.isSpinShow = false;
                    this.$parent.$refs.loginInput.showModal()
                  }
                }).catch()
              } else if (this.tab === 1) {
                //用户是否登录
                centreInfoWeb().then(res => {
                  if (res.code === 200) {
                    //获取对应的订单列表
                    orderListWeb({pageNumber: this.payPage,pageSize:this.size, orderStatus: 'OS_UNPAID'}).then(res => {
                      if(res.code === 200) {
                        this.isSpinShow = false;
                        this.orders = res.data.list.rows;
                        this.payTotal = res.data.list.total;
                      }else {
                        this.isSpinShow = false;
                        this.$Notice.warning({
                          title: "个人中心提醒",
                          desc: res.info,
                          duration: 3,
                        });
                      }
                    }).catch()
                  } else {
                    this.isSpinShow = false;
                    this.$parent.$refs.loginInput.showModal()
                  }
                }).catch()
              } else if (this.tab === 2) {
                //用户是否登录
                centreInfoWeb().then(res => {
                  if (res.code === 200) {
                    //获取对应的订单列表
                    orderListWeb({pageNumber: this.finishPage,pageSize:this.size, orderStatus: 'OS_FINISH'}).then(res => {
                      if(res.code === 200) {
                        this.isSpinShow = false;
                        this.orders = res.data.list.rows;
                        this.finishTotal = res.data.list.total;
                      }else {
                        this.isSpinShow = false;
                        this.$Notice.warning({
                          title: "个人中心提醒",
                          desc: res.info,
                          duration: 3,
                        });
                      }
                    }).catch()
                  } else {
                    this.isSpinShow = false;
                    this.$parent.$refs.loginInput.showModal()
                  }
                }).catch()
              } else {
                //用户是否登录
                centreInfoWeb().then(res => {
                  if (res.code === 200) {
                    //获取对应的订单列表
                    orderListWeb({pageNumber: this.finishPage,pageSize:this.size, orderStatus: 'OS_CLOSE'}).then(res => {
                      if(res.code === 200) {
                        this.isSpinShow = false;
                        this.orders = res.data.list.rows;
                        this.closeTotal = res.data.list.total;
                      }else {
                        this.isSpinShow = false;
                        this.$Notice.warning({
                          title: "个人中心提醒",
                          desc: res.info,
                          duration: 3,
                        });
                      }
                    }).catch()
                  } else {
                    this.isSpinShow = false;
                    this.$parent.$refs.loginInput.showModal()
                  }
                }).catch()
              }
            }
          },
          //删除全部订单中的一个
          delOrderAll(orderId){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //删除相应的订单
                  delOrder({orderId: orderId}).then(res => {
                    if (res.code === 200) {
                      //订单详情
                      orderListWeb({pageNumber: this.allPage,pageSize:this.size, orderStatus: ''}).then(res => {
                        //当页数据被全部删除，判断是否还有前页，有则请求前一页数据
                        if (res.data.list.rows.length <= 0 && res.data.list.page > 1) {
                          this.allPage--;
                          orderListWeb({pageNumber: this.allPage,pageSize:this.size, orderStatus: ''}).then(res => {
                            this.isSpinShow = false;
                            this.orders = res.data.list.rows;
                            this.allTotal = res.data.list.total;
                          }).catch()
                        } else {
                          this.isSpinShow = false;
                          this.orders = res.data.list.rows;
                          this.allTotal = res.data.list.total;
                        }
                      }).catch()
                    }else {
                      this.isSpinShow = false;
                    }
                  }).catch()
                } else {
                  this.isSpinShow = false;
                  this.$parent.$refs.loginInput.showModal()
                }
              }).catch()
            }
          },
          //删除未支付订单
          delOrderUnp(orderId){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //删除相应的订单
                  delOrder({orderId: orderId}).then(res => {
                    if (res.code === 200) {
                      //订单详情
                      orderListWeb({
                        pageNumber: this.payPage,
                        pageSize: this.size,
                        orderStatus: 'OS_UNPAID'
                      }).then(res => {
                        //当页数据被全部删除，判断是否还有前页，有则请求前一页数据
                        if (res.data.list.rows.length <= 0 && res.data.list.page > 1) {
                          this.payPage--;
                          orderListWeb({
                            pageNumber: this.payPage,
                            pageSize: this.size,
                            orderStatus: 'OS_UNPAID'
                          }).then(res => {
                            this.isSpinShow = false;
                            this.orders = res.data.list.rows;
                            this.payTotal = res.data.list.total;
                          }).catch()
                        } else {
                          this.isSpinShow = false;
                          this.orders = res.data.list.rows;
                          this.payTotal = res.data.list.total;
                        }
                      }).catch()
                    }else {
                      this.isSpinShow = false;
                    }
                  }).catch()
                } else {
                  this.isSpinShow = false;
                  this.$parent.$refs.loginInput.showModal()
                }
              }).catch()
            }
          },
          //删除已完成订单
          delOrderFinish(orderId){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //删除相应的订单
                  delOrder({orderId: orderId}).then(res => {
                    if (res.code === 200) {
                      //订单详情
                      orderListWeb({pageNumber: this.finishPage,pageSize:this.size, orderStatus: 'OS_FINISH'}).then(res => {
                        if(res.code === 200) {
                          //当页数据被全部删除，判断是否还有前页，有则请求前一页数据
                          if (res.data.list.rows.length <= 0 && res.data.list.page > 1) {
                            this.finishPage--;
                            orderListWeb({pageNumber: this.finishPage,pageSize:this.size, orderStatus: 'OS_FINISH'}).then(res => {
                              if(res.code === 200) {
                                this.isSpinShow = false;
                                this.orders = res.data.list.rows;
                                this.finishTotal = res.data.list.total;
                              }else {
                                this.isSpinShow = false;
                                this.$Notice.warning({
                                  title: "个人中心提醒",
                                  desc: res.info,
                                  duration: 3,
                                });
                              }
                            }).catch()
                          } else {
                            this.isSpinShow = false;
                            this.orders = res.data.list.rows;
                            this.finishTotal = res.data.list.total;
                          }
                        }else {
                          this.isSpinShow = false;
                          this.$Notice.warning({
                            title: "个人中心提醒",
                            desc: res.info,
                            duration: 3,
                          });
                        }
                      }).catch()
                    }else {
                      this.isSpinShow = false;
                      this.$Notice.warning({
                        title: "个人中心提醒",
                        desc: res.info,
                        duration: 3,
                      });
                    }
                  }).catch()
                } else {
                  this.isSpinShow = false;
                  this.$parent.$refs.loginInput.showModal()
                }
              }).catch()
            }
          },
          //删除已关闭订单
          delOrderClose(orderId){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //删除相应的订单
                  delOrder({orderId: orderId}).then(res => {
                    if (res.code === 200) {
                      //订单详情
                      orderListWeb({pageNumber: this.closePage,pageSize:this.size, orderStatus: 'OS_CLOSE'}).then(res => {
                        //当页数据被全部删除，判断是否还有前页，有则请求前一页数据
                        if (res.data.list.rows.length <= 0 && res.data.list.page > 1) {
                          this.closePage--;
                          orderListWeb({pageNumber: this.closePage,pageSize:this.size, orderStatus: 'OS_CLOSE'}).then(res => {
                            if(res.code === 200) {
                              this.isSpinShow = false;
                              this.orders = res.data.list.rows;
                              this.closeTotal = res.data.list.total;
                            }else {
                              this.isSpinShow = false;
                              this.$Notice.warning({
                                title: "个人中心提醒",
                                desc: res.info,
                                duration: 3,
                              });
                            }
                          }).catch()
                        } else {
                          this.isSpinShow = false;
                          this.orders = res.data.list.rows;
                          this.closeTotal = res.data.list.total;
                        }
                      }).catch()
                    }else {
                      this.isSpinShow = false;
                    }
                  }).catch()
                } else {
                  this.isSpinShow = false;
                  this.$parent.$refs.loginInput.showModal()
                }
              }).catch()
            }
          },
          //取消未支付订单
          cancelUnp(orderId){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //取消订单
                  cancelOrderWeb({orderId: orderId}).then(res => {
                    if(res.code === 200 ) {
                      //订单详情
                      orderListWeb({pageNumber: this.payPage,pageSize:this.size, orderStatus: 'OS_UNPAID'}).then(res => {
                        if(res.code === 200) {
                          //当页数据被全部删除，判断是否还有前页，有则请求前一页数据
                          if (res.data.list.rows.length <= 0 && res.data.list.page > 1) {
                            this.payPage--;
                            orderListWeb({pageNumber: this.payPage,pageSize:this.size, orderStatus: 'OS_UNPAID'}).then(res => {
                              if(res.code === 200) {
                                this.isSpinShow = false;
                                this.orders = res.data.list.rows;
                                this.payTotal = res.data.list.total;
                              }else {
                                this.isSpinShow = false;
                                this.$Notice.warning({
                                  title: "个人中心提醒",
                                  desc: res.info,
                                  duration: 3,
                                });
                              }
                            }).catch()
                          }else {
                            this.isSpinShow = false;
                            this.orders = res.data.list.rows;
                            this.allTotal = res.data.list.total;
                          }
                        }else {
                          this.isSpinShow = false;
                          this.$Notice.warning({
                            title: "个人中心提醒",
                            desc: res.info,
                            duration: 3,
                          });
                        }
                      }).catch()
                    }else {
                      this.isSpinShow = false;
                      this.$Notice.warning({
                        title: "个人中心提醒",
                        desc: res.info,
                        duration: 3,
                      });
                    }
                  }).catch()
                } else {
                  this.isSpinShow = false;
                  this.$parent.$refs.loginInput.showModal()
                }
              }).catch()
            }
          },
          //取消全部订单中的未支付订单
          cancelAll(orderId){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //取消订单
                  cancelOrderWeb({orderId: orderId}).then(res => {
                    if (res.code === 200) {
                      orderListWeb({pageNumber: this.allPage, pageSize: this.size, orderStatus: ''}).then(res => {
                        if (res.code === 200) {
                          this.isSpinShow = false;
                          this.orders = res.data.list.rows;
                          this.allTotal = res.data.list.total;
                        } else {
                          this.isSpinShow = false;
                          this.$Notice.warning({
                            title: "个人中心提醒",
                            desc: res.info,
                            duration: 3,
                          });
                        }
                      }).catch()
                    } else {
                      this.isSpinShow = false;
                      this.$Notice.warning({
                        title: "个人中心提醒",
                        desc: res.info,
                        duration: 3,
                      });
                    }
                  }).catch()
                } else {
                  this.isSpinShow = false;
                  this.$parent.$refs.loginInput.showModal()
                }
              }).catch()
            }
          },
          getOrderList(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //订单详情
                  orderListWeb({pageNumber: this.allPage,pageSize:this.size, orderStatus: ''}).then(res => {
                    if(res.code === 200) {
                      this.isSpinShow = false;
                      this.orders = res.data.list.rows;
                      this.allTotal = res.data.list.total;
                    }else {
                      this.isSpinShow = false;
                      this.$Notice.warning({
                        title: "个人中心提醒",
                        desc: res.info,
                        duration: 3,
                      });
                    }
                  }).catch()
                }else{
                  this.isSpinShow = false;
                }
              }).catch()
            }
          }
        },
        created() {
         this.getOrderList();
        },
        components: {
          nodata
        }
    }
</script>
